<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>后台管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" th:href="@{/static/commen/css/layui.css}" media="all">
        <link rel="stylesheet" th:href="@{../../static/back/css/admin.css}" media="all">
	</head>
	<body>
        <div class="layui-fluid">
			<div class="layui-col-md12">
				<form class="layui-form layui-form-pane" action="" id="frm-reg" >
					<div class="layui-form-item">
						<label class="layui-form-label">板块标题</label>
						<div class="layui-input-inline">
							<input id="plateName" name="plateName" th:value="${plate != null ? plate.plateName : ''}" lay-verify="required" autocomplete="off" class="layui-input" type="text"/>
						</div>
					</div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">板块路径</label>
                        <div class="layui-input-inline">
                            <input id="plateUrl" name="plateUrl" th:value="${plate != null ? plate.plateUrl : ''}" lay-verify="required" autocomplete="off" class="layui-input" type="text"/>
                        </div>
                    </div>
					<div class="layui-form-item">
						<label class="layui-form-label">板块描述</label>
						<div class="layui-input-inline">
							<textarea id="description" name="description" th:text="${plate != null ? plate.description : ''}" lay-verify="required" autocomplete="off" placeholder="请输入内容" type="text" class="layui-textarea"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">板块图片</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="plateImg" id="plateImg"
								   th:value="${plate != null ? plate.plateImg : ''}">
						</div>
						<div class="layui-form-mid layui-word-aux">
							<button type="button" class="layui-btn" data-name="website_logo" data-place="system"
									style="margin-top: -8px;" id="plateImgButton">上传板块图片
							</button>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<img id="images_url" src="http://images.nowcoder.com/head/746t.png"
								 style="width: 150px;height: 50px;border: 1px solid #cccccc;border-radius: 5px;">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">是否可用</label>
						<div class="layui-input-block">
							<input type="radio" name="plateStatus" value="1" title="可用" th:checked="${plate == null || plate.plateStatus == 1}">
							<input type="radio" name="plateStatus" value="0" title="禁用" th:checked="${plate != null && plate.plateStatus == 0}">
						</div>
					</div>
					<div class="layui-form-item" style="margin-left: 50px;">
						<input type="hidden"  id="img" th:value="${plate == null ? '' : plate.PlateImg}">
						<input type="hidden" name="id" id="id" th:value="${plate != null ? plate.id : ''}">
						<input type="hidden" name="request_url" id="request_url" value="/back/plate/setPlate">
						<button class="layui-btn" id="execute" lay-submit="execute" lay-filter="execute"><i class="layui-icon layui-icon-form"></i>保存</button>
					</div>
				</form>
			</div>
		</div>	
    </body>
</html>
<script th:src="@{/static/back/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/static/commen/layui.js}"></script>
<script th:src="@{/static/back/js/admin.js}"></script>
<link th:href="@{/static/lib/layui_exts/cropper/cropper.css}" rel="stylesheet"/>
<script th:src="@{/static/lib/layui_exts/cropper/croppers.js}"></script>
<script>
	layui.config({
		base: '/static/lib/layui_exts/cropper/' //layui自定义layui组件目录
	}).use(['form', 'croppers'], function () {
		var $ = layui.jquery
				, form = layui.form
				, croppers = layui.croppers
				, layer = layui.layer;

		//创建一个头像上传组件
		croppers.render({
			elem: '#plateImgButton'
			, saveW: 370     //保存宽度
			, saveH: 244
			, area: '800px'  //弹窗宽度
			, url: "/common/upload?type=plate"//图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
			, done: function (path) { //上传完毕回调
				$("#plateImg").val(path);
				$("#images_url").attr('src', path);
			}
		});

	});
	$(function () {
		var img = $("#img").val();
		if(img != ''){
			$("#images_url").attr("src",img);
		}else {
			$("#images_url").attr("src",'http://images.nowcoder.com/head/746t.png');
		}
	})
</script>